<template>
  <div id="app">
    <!-- 加载中遮罩 -->
    <el-loading 
      v-if="translationsLoading" 
      :text="$t('app.loading') || '加载中...'"
      fullscreen
    />

    <nav class="navbar">
      <div class="nav-brand">{{ $t('app.brand') || '🌐 App' }}</div>
      <div class="nav-links">
        <router-link to="/">{{ $t('nav.home') }}</router-link>
        <router-link to="/about">{{ $t('nav.about') }}</router-link>
      </div>
      <div class="nav-locale">
        <el-button-group>
          <el-button 
            v-for="loc in supportedLocales"
            :key="loc"
            :type="locale === loc ? 'primary' : ''"
            @click="handleSwitchLocale(loc)"
          >
            {{ getLocaleName(loc) }}
          </el-button>
        </el-button-group>
      </div>
    </nav>

    <main class="main-content">
      <!-- 词条加载失败提示 -->
      <el-alert
        v-if="translationsLoadError"
        :title="$t('app.platformUnavailable') || '平台不可用'"
        type="error"
        :description="translationsLoadError"
        show-icon
        :closable="false"
        style="margin-bottom: 20px;"
      />
      <router-view />
    </main>

    <footer class="footer">
      <p>{{ $t('app.footer') || '' }}</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { switchLocale , initI18n } from './i18n'
import { ElMessage } from 'element-plus'

const { locale, t } = useI18n()


const supportedLocales = ref(['zh-CN', 'en-US'])
const translationsLoading = ref(true)
const translationsLoadError = ref(null)

// 语言显示名称（从平台获取，如果没有则使用默认）
const getLocaleName = (localeCode) => {
  // 尝试从平台获取语言名称
  const localeNameKey = `locale.name.${localeCode}`
  const name = t(localeNameKey)
  if (name && name !== localeNameKey) {
    return name
  }
  
  // Fallback 映射
  const defaultNames = {
    'zh-CN': '中文',
    'en-US': 'English',
  }
  return defaultNames[localeCode] || localeCode
}

const handleSwitchLocale = async (targetLocale) => {
  try {
    await switchLocale(targetLocale)
    const localeName = getLocaleName(targetLocale)
    ElMessage.success(t('app.localeSwitched', { locale: localeName }) || `已切换到 ${localeName}`)
  } catch (error) {
    ElMessage.error(t('app.localeSwitchFailed') || '切换语言失败')
    console.error('切换语言失败:', error)
  }
}


onMounted(async () => {
  // 初始化 i18n（确保词条先加载）
  try {
    translationsLoading.value = true
    const result = await initI18n()
    
    if (!result.success) {
      translationsLoadError.value = result.error || '词条加载失败'
      ElMessage.error(t('app.platformUnavailable') || '国际化平台不可用')
    }
  } catch (error) {
    translationsLoadError.value = error.message
    console.error('初始化失败:', error)
  } finally {
    translationsLoading.value = false
  }
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-brand {
  font-size: 20px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background 0.3s;
}

.nav-links a:hover,
.nav-links a.router-link-active {
  background: rgba(255,255,255,0.2);
}

.main-content {
  flex: 1;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.footer {
  background: #f5f5f5;
  padding: 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.footer p {
  margin: 5px 0;
}
</style>


